<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="styling.html">
<body style="display: flex; margin: 0; height: 100vh; font-family: Courier, monospace; white-space: pre;">
  <div id="source" style="flex: 1; border-right: 1px dashed black; padding: 10px;" contenteditable></div>
  <div id="target" style="flex: 1; padding: 10px;"></div>
  <script>
    var css = ':host { display: block; } \n.foo { background: red; }';

    function transformCss(css, scope, ext) {
      var rules = Polymer.CssParse.parse(css);
      if (Polymer.Settings.useNativeCSSProperties) {
        Polymer.ApplyShim.transform([{__cssRules: rules}]);
      }
      Polymer.StyleTransformer.css(rules, scope, ext);
      return Polymer.CssParse.stringify(rules, true);
    }

    var scope = 'x-foo';
    function cssToTarget(cssText) {
      target.textContent = transformCss(cssText, scope);
    }

    var h;
    source.addEventListener('keyup', function(e) {
      if (h) {
        clearTimeout(h);
      }
      h = setTimeout(function() {
        cssToTarget(e.target.textContent);
      }, 1000);
    });

    source.textContent = css;
    cssToTarget(source.textContent);
  </script>
</body>
